<template>
    <div class="login-page">
        <el-card>
            <!-- 具名插槽 -->
            <template v-slot:header>面经运营后台</template>
            <template #default>
                <!-- 表单的基本结构 -->
                <!--
                    el-form 整个表单组件最外层
                    el-form-item 每一行，里面包含我们的表单控件

                <el-form >
                    <el-form-item>
                        -- 表单控件 --
                        -- Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker --
                        ....这里放
                    </el-form-item>
                </el-form>
            -->

                <el-form >
                    <el-form-item label="用户名">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item class="tc">
                        <el-button type="primary">登录</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
    </div>

  </template>

<script>
export default {
  name: 'LoginIndex'
}
</script>
<!-- 怎么给组件加样式
1. 直接给组件加类名, 写在标签上

2. 组件标签名，默认都有一个和标签名一样的类名，可以直接用这个类名
==> element-ui 在封装组件的时候，自己定义好的

3. 注意什么时候，自己单独加类名
-->

<!-- scoped 让样式只作用域当前组件 -->
<!-- 可以去掉scoped吗？不可以，去掉了之后，样式全局了，会污染全局环境 -->
<style lang="scss" scoped>
.el-card {
    width: 420px;
    margin: 0 auto;
    /*
        如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，
        你可以使用 >>> 操作
        >>> sass不支持这个！
        Vue给我们提供一个 深度选择器
    */
    :deep(.el-card__header){
        background-color: #727cf5;
        text-align: center;
        color: white;
    }
}
// 当我们引入一些框架组件的时候，又想修改组件内的样式，使用它们
// https://vue-loader.vuejs.org/zh/guide/scoped-css.html
// Vue3 https://cn.vuejs.org/api/sfc-css-features.html#scoped-css
// 1.  scss  ::v-deep    ==> Vue3 改了  :deep()  , vue2也可以使用
// 2.  less  /deep/

// 3.  stylus  >>>

// 我们自己在组件标签上写的类名是可以使用的，
// 不能使用是看不见的那些组件内的类名，需要深度选择器
</style>
